<template>
  <div>
    <el-dialog
      :visible="settingsVisible"
      :title="titleName"
      width="50%"
      class="customClass"
      @close="closeDialog">
      <!-- {{ settingForm }} -->
      <!-- 新增环节 -->
      <el-form
        v-loading="listLoading"
        v-if="settingMode === 'configCode'"
        :ref="settingMode"
        :rules="rule"
        :model="settingForm"
        style="margin-left:20px">
        <el-form-item :label-width="labeWidth" label="请选择标码包" prop="codeRecordId">
          <el-col :span="24" >
            <el-select v-model="settingForm.codeRecordId" style="width:80%" @change="updateSelect">
              <el-option v-for="(item) in codeList" :key="item.id" :label="item.generateNumber + ' - ' + item.createTime" :value="item.id"/>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <!-- {{ settingForm }} -->
      <el-form
        v-loading="listLoading"
        v-if="settingMode === 'sourceMeesage'"
        :ref="settingMode"
        :rules="rule"
        :model="settingForm"
        style="margin-left:20px">
        <el-form-item :label-width="'0'" label="" prop="traceabilityBatchId">
          <el-col :span="24" >
            <el-select v-model="settingForm.traceabilityBatchId" style="width:80%" placeholder="请选择商品批次编号" @change="updateSelect">
              <el-option v-for="(item) in codeList" :key="item.id" :label="item.batchNumber + ' - ' + item.createTime" :value="item.id"/>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>

      <div class="bottomBtn">
        <el-button v-preventReClick type="primary" @click="submitForm(settingMode)">确定</el-button>
        <el-button v-preventReClick type="info" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import carouselList from '@/components/carousel/list'
import { createCodeList } from '@/api/source'
import config from '@/utils/config';
import axios from 'axios'
import { getBatchList } from '@/api/source'
// <sendGoods :send-goods-visible.sync="sendGoods" :send-goods-index="sendGoodsIndex" :send-goods-id="sendGoodsId"/>
export default {
  components: { carouselList },
  props: {
    settingsVisible: {
      type: Boolean,
      required: true
    },
    myIndex: {
      type: Number,
      required: true
    },
    dialogData: {
      type: Object,
      required: true
    },
    settingMode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      labeWidth: '120px',
      listLoading: true,
      goodTypesForm: {},
      settingForm: {},
      codeList: [],
      Visible: false,
      rule: {
        codeRecordId: [
          { required: true, message: '请选择标码包', trigger: 'blur' }
        ],
        traceabilityBatchId: [
          { required: true, message: '请选择商品批次编号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    titleName() {
      console.log(this.settingMode)
      const titleMap = {
        'configCode': '配置标码',
        'sourceMeesage': '选择商品批次编号',
        'createBatch': '商品批次'
      }
      return titleMap[this.settingMode]
    }
  },
  watch: {
    myIndex(val) {
      if (val > -1) {
        // 配置标码
        if (this.settingMode === 'configCode') {
          this.settingForm = { id: '', codeRecordId: '' }
          this.settingForm.id = this.dialogData.id
          this.settingForm.codeRecordId = this.dialogData.codeRecordId
          this.getConfigCode()
        }
        // 商品管理 - 溯源信息
        if (this.settingMode === 'sourceMeesage') {
        //   console.log('dialogData:', this.dialogData)
        //   this.settingForm = { id: '', traceabilityBatchId: '' }
        //   if (this.dialogData.traceabilityBatchId) {
        //     this.settingForm.traceabilityBatchId = this.dialogData.traceabilityBatchId
        //   }
        //   this.settingForm.id = this.dialogData.goodId
          this.getSourceMessage()
        }

        // if (this.settingMode === 'code') this.settingForm = Object.assign({}, this.dialogData)
        // if (this.settingMode === 'createCode') {
        //   this.createForm.id = this.dialogData.id
        // }
      } else {
        // if (this.settingMode === 'code') this.settingForm = {}
      }
    }
  },
  mounted() {
    // if (this.settingMode === 'discount' || this.settingMode === 'membersRebate') {
    //   // this.getConstantPercent()
    //   this.getMomList()
    // }
  },
  methods: {
    updateSelect() {
      this.$forceUpdate()
    },
    // 获取标码包
    getConfigCode() {
      const newData = Object.assign({}, { isConfigure: 0, traceabilityGoodsId: this.dialogData.traceabilityGoodsId, pageNum: 1, pageSize: 1000 })
      createCodeList(newData).then(res => {
        if (res.code === '200') {
          this.codeList = res.data.list
          this.listLoading = false
        }
        console.log(res)
      })
    },
    // 溯源信息
    getSourceMessage() {
      getBatchList(this.dialogData).then(res => {
        if (res.code === '200') {
          console.log('溯源数据：', res.data.list)
          this.codeList = res.data.list

          console.log('dialogData:', this.dialogData)
          this.settingForm = { id: '', traceabilityBatchId: '' }
          if (this.dialogData.traceabilityBatchId) {
            this.settingForm.traceabilityBatchId = this.dialogData.traceabilityBatchId
          }
          this.settingForm.id = this.dialogData.goodId

          // console.log('判断是否有', this.filterBatchId(this.codeList, this.dialogData.traceabilityBatchId))
          if (!this.filterBatchId(this.codeList, this.dialogData.traceabilityBatchId)) {
            const obj = {
              id: this.dialogData.traceabilityBatchId,
              batchNumber: '此批次已失效',
              createTime: '请重新选择'
            }
            this.codeList.push(obj)
            // this.codeList = Object.assign(obj, this.codeList)
            console.log(this.codeList)
          }

          this.listLoading = false
        }
      })
    },
    filterBatchId(arr, id) {
      console.log(arr, id)
      const myarr = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === id) {
          myarr.push(i)
        }
      }
      console.log(myarr)
      if (myarr.length) {
        return true
      } else {
        return false
      }
    },
    // 生成二维码
    // exportZip() {
    //   axios({
    //     method: 'get',
    //     url: config.BaseUrl + '/code/generateCode',
    //     params: this.createForm,
    //     responseType: 'blob'
    //   }).then((res) => {
    //     const blob = new Blob([res.data], { type: 'application/zip' })
    //     const url = window.URL.createObjectURL(blob)
    //     const link = document.createElement('a') // 创建a标签
    //     link.href = url
    //     // link.download = '清单文件' // 重命名文件
    //     link.click()
    //   }).catch(err => {
    //     this.$Message.error(err)
    //   })
    // },
    // getCodingRulesFN() {
    //   getCodingRules().then(res => {
    //     console.log('编码规则：', res)
    //     this.settingForm.codingRules = res
    //   })
    // },
    // receiveDataFn(val) {
    //   if (this.settingMode === 'createCode' || this.settingMode === 'code') {
    //     console.log('传递回来的数据：', val)
    //     this.settingForm.traceabilityGoodsId = val.id
    //     this.settingForm.goodName = val.name
    //     this.settingForm.ruleNumber = val.name + new Date().getTime()
    //     this.getCodingRulesFN() // 填写编码规则
    //   }

    //   if (this.settingMode === 'createBatch') {
    //     console.log(val)
    //     this.batchForm.traceabilityGoodsId = val.id
    //     this.batchForm.goodName = val.goodName
    //     // this.batchForm.ruleNumber = val.name + new Date().getTime()
    //   }
    // },
    // choose() {
    //   this.Visible = true
    // },
    // chooseLine() {
    //   this.chooseVisible = true
    // },
    submitForm(name) {
      console.log(name)
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$emit('updataParent', this.settingForm)
          this.closeDialog()
          this.settingForm = {}
        }
      })
    },
    closeDialog() {
      this.$emit('update:settingsVisible', false)
      this.$emit('update:myIndex', -1)
    }
  }
}
</script>
<style scope>
.bottomBtn{
    height: 100px;
    padding-top: 20px;
    width:100%;
    text-align: center;
    border-top: 1px solid #ddd
}
.bottomBtn button{
    display: inline-block;
}
select{
    width:100%
}
.customClass .el-dialog{
    min-width: 400px;
    width: 400px;
    /* width: 60%; */
}
.el-input{
    width:100%
}
</style>
